import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaCheckbox, WeaDialog, WeaTab, WeaRightMenu, WeaLocaleProvider } from 'ecCom';
import { Button, Modal } from 'antd';
import { WeaDocPeopleList } from '../../public';

const confirm = Modal.confirm;
const getLabel = WeaLocaleProvider.getLabel;

@inject('netDiskStore')
@observer
class LookSharer extends React.Component {
   constructor(props) {
      super(props);
      this.rightMenuData = [
         {
            key: 'search',
            icon: <i className="icon-coms-search" />,
            content: getLabel(388113, '搜索'),
            onClick: this.searchHandle,
         },
      ];
      const { getLookTargetData } = this.props.netDiskStore;
      getLookTargetData(); // 获取分享对象数据
   }


   // 搜素功能
   searchHandle = () => {
      const searchVal = this.props.netDiskStore.lookTarget.searchVal;
      // todo 调用API
      console.log(searchVal);
   };

   // onChange回调
   searchChange = (val) => {
      const { setLookTarget } = this.props.netDiskStore;
      setLookTarget({ searchVal: val });
   };

   // 关闭模态框
   closeDialog = () => {
      const { setLookTarget } = this.props.netDiskStore;
      setLookTarget({ visible: false });
   };

   // 选择事件回调
   selectionHandle = (keys, key) => {
      const { setLookTarget } = this.props.netDiskStore;
      setLookTarget({ selectedKeys: keys });
   };

   // check框 全选/取消
   checkChange = (val) => {
      const { lookTarget, setLookTarget } = this.props.netDiskStore;
      const allKeys = toJS(lookTarget.data).map(i => i.id);
      val === '1' && setLookTarget({ selectedKeys: allKeys });
      val === '0' && setLookTarget({ selectedKeys: [] });
   };

   // 批量删除
   batchDelete = () => {
      confirm({
         title: getLabel(131329, '信息确认'),
         content: getLabel(129242, '确定删除选中项吗？'),
         onOk: this.doDelete,
      });
   };
   doDelete = () => {
      const { lookTarget, setLookTarget } = this.props.netDiskStore;
      const { data, selectedKeys } = toJS(lookTarget);
      let newData = data.filter(i => !selectedKeys.includes(i.id));
      // todo 调API，返回 true 后执行
      setLookTarget({ data: newData, selectedKeys: [] });
   };

   pageChange = (page) => {
      console.log('pagechange', page);
   };

   render() {
      const { lookTarget } = this.props.netDiskStore;
      const { visible, selectedKeys, data, searchVal } = toJS(lookTarget);

      return (
         <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@o4chkw`}
           className="Doc-NetDisk-shareTarget-Dialog"
           icon="icon-portal-CloudStore"
           iconBgcolor="#f4b723"
           title={getLabel(514018, '分享对象')}
           visible={visible}
           buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@elfjsa@closeDialog`} onClick={this.closeDialog}>{ getLabel(309, '关闭') }</Button>]}
           onCancel={this.closeDialog}
           style={{ width: 720 }}
           hasScroll={true}
         >
            <div style={{ position: 'relative' }}>
               <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@90y4ad`} className="shareTarget-checkbox" value={lookTarget.checkboxValue} onChange={this.checkChange} content={getLabel(556, '全选')} />
               <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ldk2fp`} datas={this.rightMenuData}>
                  <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@hwwv49`}
                    searchType={['base']}
                    searchsBaseValue={searchVal}
                    onSearchChange={this.searchChange}
                    onSearch={this.searchHandle}
                    buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@44v15b@batchDelete`} type="primary" onClick={this.batchDelete} disabled={selectedKeys.length === 0}>{ getLabel(32136, '批量删除') }</Button>]}
                  />
                  <WeaDocPeopleList ecId={`${this && this.props && this.props.ecId || ''}_WeaDocPeopleList@8f2gfh`}
                    data={data}
                    selectedKeys={selectedKeys}
                    onSelect={this.selectionHandle}
                    rowSelect={true}
                    checkbox={false}
                    style={{ height: 430 }}
                    pageable={true}
                    pageParam={{ style: 0, count: 21, pageSize: 6 }}
                    pageChange={this.pageChange}
                  />
               </WeaRightMenu>
            </div>
         </WeaDialog>

      );
   }
}

export default LookSharer;

